import { useState } from "react"
import CalendarItem from "../CalendarItem"

type IFilterInput = {
    date?: boolean;
    value?: any;
    setValue?: (val: any) => void
}

function FilterInput({ date, value, setValue }: IFilterInput) {
    const [visible, setVisible] = useState(false)

    return (
        <>
            <div className="mt-[20px] flex">
                <div className="
                        border-b-1
                        border-[#C8C8CD]
                        h-[40px]
                        mr-[36px]
                        flex"
                    onClick={() => {
                        setVisible(true)
                    }}
                >
                    <input
                        type="text"
                        className="
                            w-[294px]
                            h-[24px]
                            outline-0
                            text-[24px]
                            leading-[24px"
                        placeholder="开始时间"
                        style={{ color: "#C8C8CD" }}
                        value={value ? value[0] || '' : ''}
                        onChange={(e) => {
                            if (setValue) {
                                setValue(value ? [e.target.value, value[1]] : [e.target.value, null])
                            }
                        }}
                    />
                </div>
                <span>至</span>
                <div className="
                    border-b-1
                    border-[#C8C8CD]
                    h-[40px]
                    ml-[36px]
                    flex
                ">
                    <input
                        type="text"
                        className="
                            w-[294px]
                            h-[24px]
                            outline-0
                            text-[24px]
                            leading-[24px"
                        placeholder="结束时间"
                        style={{ color: "#C8C8CD" }}
                        value={value ? value[1] || '' : ''}
                        onChange={(e) => {
                            if (setValue) {
                                setValue(value ? [value[0], e.target.value] : [null, e.target.value])
                            }
                        }}
                    />
                </div>
            </div>
            {date && <CalendarItem
                visible={visible}
                setVisible={setVisible}
                onChange={(val) => {
                    if (setValue) {
                        setValue(val)
                    }
                }}
            />}
        </>
    )
}
export default FilterInput